{% extends 'mainapp/base.html' %}

{% load static %}

{% block content %}

<div class="row justify-content-center mt-3">
    <div class="card col-sm-12 col-md-6 col-lg-4 border-0">
        <a href="{% url 'mainapp:courses_detail' pk=1 %}">
            <img src="{% static 'img/course001.jpg' %}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center">Web Python</h5>
            </div>
        </a>
    </div>


    <div class="card col-sm-12 col-md-6 col-lg-4 border-0">
        <a href="{% url 'mainapp:courses_detail' pk=2 %}">
            <img src="{% static 'img/course002.jpg' %}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center">Web Golang</h5>
            </div>
        </a>
    </div>

    <div class="card col-sm-12 col-md-6 col-lg-4 border-0">
        <a href="{% url 'mainapp:courses_detail' pk=3 %}">
            <img src="{% static 'img/course003.jpg' %}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center">Web JavaScript</h5>
            </div>
        </a>
    </div>


    <div class="card col-sm-12 col-md-6 col-lg-4 border-0">
        <a href="{% url 'mainapp:courses_detail' pk=4 %}">
            <img src="{% static 'img/course004.jpg' %}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center">Web Java</h5>
            </div>
        </a>
    </div>


    <div class="card col-sm-12 col-md-6 col-lg-4 border-0">
        <a href="{% url 'mainapp:courses_detail' pk=5 %}">
            <img src="{% static 'img/course005.jpg' %}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center">Web PHP</h5>
            </div>
        </a>
    </div>


    <div class="card col-sm-12 col-md-6 col-lg-4 border-0">
        <a href="{% url 'mainapp:courses_detail' pk=6 %}">
            <img src="{% static 'img/course006.jpg' %}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center">Python AI</h5>
            </div>
        </a>
    </div>


    <div class="card col-sm-12 col-md-6 col-lg-4 border-0">
        <a href="{% url 'mainapp:courses_detail' pk=7 %}">
            <img src="{% static 'img/course007.jpg' %}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title text-center">DevOps</h5>
            </div>
        </a>
    </div>
</div>

    <div class="row justify-content-center align-items-center mt-3 mb-n3">
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                {% if page_obj.has_previous %}
                    <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a></li>
                {% endif %}
                {% for item in page_obj.paginator.page_range %}
                    <li class="page-item"><a class="page-link" href="?page={{ item }}">{{ item }}</a></li>
                {% endfor %}
                {% if page_obj.has_next %}
                    <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a></li>
                {% endif %}
            </ul>
        </nav>
    </div>

{% endblock content %}


